<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue componets</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<div id="v-OnClick">
    <ol>
        <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
    </ol>
    <button v-on:click="addItem"> v-on:click</button>
</div>
<script>
    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    })

    var v_onClick = new Vue({
        el: '#v-OnClick',
        data: {
            groceryList: [
                {text: 'Vegetables'},
                {text: 'Cheese'},
            ]
        },
        methods: {
            addItem: function () {
                v_onClick.groceryList.push({text: msg + "v-on:click"})
            }
        }
    })
</script>

<hr>
<!--局部component注册-->
  <!--方案一：-->
<div id="parent"></div>
<script>
  var Parent = Vue.extend({
    template: '<div>局部component注册：<br> 直接new一个parent的实例对象 <my-component></my-component></div>',
    components: {
      'my-component': {
        template: '<div>A custom component!</div>'
      } }
  })

//    new的是Parent实例对象，
    new Parent({
      el: '#parent'
    })
</script>

<hr>
<!--局部component注册-->
<!--方案二：在vue里增加 el+components-->
<div id="comp">
  <parentcom></parentcom>
</div>

<script>
  var ChildCom = Vue.extend({
    template: '<div> A ChildCom custom component!</div>'
  })
  var parentCom = Vue.extend({
    template: '<div>局部component注册：<br> 使用Vue中的el+components: <child-component></child-component> </div>',
    components: {
      'child-component': ChildCom
    }
  })

  //  方案二：
  new Vue({
    el: '#comp',
    components: {
      'parentcom': parentCom
    }
  })

</script>


<hr>

<div id="partialComponent">
    <ol>
        <self-com v-for="item in groceryList" ></self-com>
    </ol>
    <button @click="addItemAt">@click</button>
</div>
<hr>

<script>
    var Child2 = {
        template: '<li>A custom component!</li>'
    }
    new Vue({
        // ...
        components: {
            // <my-component> 将只在父模板可用
            'self-com': Child2
        }
    })

    var partialComponent  = new Vue({
        el: '#partialComponent',
        data: {
            groceryList: [
                {text: 'Cheese'},
                {text: 'Whatever else humans are supposed to eat'}
            ]
        },
        methods: {
            addItemAt: function () {
                this.groceryList.push({text: "a different template--- @click"})
            }
        }
    })



</script>
</body>
</html>
